<template>
	<view class="container">
		<view class="title">
			<text :class="type == 'zf' ? 'active' : ''" @click="readWave('zf')">{{$t('inspection.taskExecute.amplitude')}}</text>
			<text :class="type == 'jsd' ? 'active' : ''" @click="readWave('jsd')">{{$t('inspection.taskExecute.acceleration')}}</text>
			<text :class="type == 'sudu' ? 'active' : ''" @click="readWave('sudu')">{{$t('inspection.taskExecute.speed')}}</text>
		</view>
		<view id="echart" class="charts" :prop="waveData" :change:prop="echarts.updateEcharts" :msg="msg" :change:msg="echarts.clearTimer"></view>
		<view class="btn">
			<button type="primary" size="mini" @click="closePop">{{$t('baseCommon.buttons.close')}}</button>
		</view>
	</view>
</template>

<script>
	import { selectMpData } from '@/api/business/inspect.js'
	
	export default {
		props: {
			hisMpItem: {
				type: Object,
				default() {
					return {}
				}
			},
			network: {
				type: String,
				default() {
					return ''
				}
			}
		},
		data() {
			return {
				type: '',
				waveData: [],
				msg: ''
			}
		},
		mounted() {
			this.type = this.hisMpItem.mpType
			this.readWave(this.type)
		},
		methods: {
			async readWave(type) {
				this.type = type
				this.waveData = []
				let mpNo = this.hisMpItem.mpNo
				if(type == 'zf') {
					mpNo += "-z"
				} else if(type == 'jsd') {
					mpNo += "-j"
				} else if(type == 'sudu') {
					mpNo += "-s"
				}
				
				if(this.network == 'online') {
					await selectMpData({ mpNo: mpNo }).then(res=>{
						// 取最近时间的7条数据
						this.waveData = res.data.slice(0, 7)
					})
				} else if(this.network == 'offline') {
					await sqliteInspect.getInspectionHistory(mpNo).then(res=>{
						utilities.formatHumpLineTransfer(res)
						// 取最近时间的7条数据
						this.waveData = res.slice(0, 7)
					})
				}
			},
			closePop() {
				this.msg = "clear"
				this.$emit('closePop', 'waveHis')
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		data() {
			return {
				script: "",
				timer: []
			}
		},
		mounted() {
			if (typeof window.echarts === 'object') {
				this.drawChart()
			} else {
				this.script = document.createElement('script')
				this.script.src = './static/libs/echarts.min.js'
				this.script.onload = this.drawChart
				document.head.appendChild(this.script)
			}
		},
		methods: {
			drawChart() {
				let categories = []
				let series = []
				
				if(this.waveData.length > 0) {
					let chartData = this.waveData[0].dataValue
					let data = chartData.split(",")
					for(let i=0; i<data.length; i++) {
						categories.push(i)
						series.push(data[i])
					}
				}
				
				myChart = echarts.init(document.getElementById('echart'));
				let option = {
					grid: {
						left: '15%',
						top:'8%',
						right:'1%',
						bottom:'5%'
					},
					xAxis: {
						axisLabel:{
							show: false,
							interval: 30,
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: categories
					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: false
						},
					},
					series: [{
						data: series,
						type: 'line',
						smooth: true,
						itemStyle : {
							normal : {
								color:'#1e90e6',
								lineStyle:{
									color:'#1e90e6'
								},
							}
						}
					}]
				}
				
				let len = 0
				let time = setInterval(()=>{
					for(let i=1; i<this.waveData.length; i++) {
						len = len+1
						if(len < this.waveData.length) {
							categories = categories.slice(150)
							series = series.slice(150)
							let chartData = this.waveData[i].dataValue
							let data = chartData.split(",")
							for(let j=0; j<data.length; j++) {
								categories.push(j)
								series.push(data[j])
							}
							
							myChart.setOption({
								xAxis: {
									data: categories
								},
								series: [{
									data: series
								}]
							});
						} else {
							len = 0
							categories = []
							series = []
							
							if(this.waveData.length > 0) {
								let chartData = this.waveData[0].dataValue
								let data = chartData.split(",")
								for(let i=0; i<data.length; i++) {
									categories.push(i)
									series.push(data[i])
								}
							}
							// clearInterval(time)
						}
					}
				}, 1000)
				
				this.timer.push(time)
				
				myChart.setOption(option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart !== "") {
					this.waveData = newValue
					this.clearTimer()
					this.drawChart()
				}
				
				// this.script.onload = this.drawChart
				// document.head.appendChild(this.script)
			},
			clearTimer(newValue, oldValue, ownerInstance, instance) {
				this.timer.forEach(time=>{
					clearInterval(time)
				})
				this.timer = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
	}
	
	.title {
		font-size: 16px;
		padding: 10px;
		
		uni-text {
		    margin: 5px;
		}
		
		.active {
			color: #1E91E6;
		}
	}
	
	.btn {
		text-align: center;
		padding-bottom: 10px;
		
		uni-button {
			font-size: 14px;
		}
	}
	
	.charts {
		width: 350px;
		height: 300px;
		background-color: #FFFFFF;
	}
</style>
